<template>
	<view class="container">
		<u-navbar :title="pageTitle" bgColor="rgba(255,255,255,1)" leftIconColor="#000" titleStyle="color:#000;font-weight: bold;"></u-navbar>
		<view class="detail" :style="{ position: 'absolute', top: sHeight }">
			<text class="detail-title">
				<!-- 22--{{ messageDetail.messageContent }} -->
			</text>
			<view>
				<!-- <u-parse :content="messageDetail.messageContent"></u-parse> -->
				<mp-html
					:content="messageDetail.messageContent" 
					:tag-style="{
					  div: 'white-space: pre-wrap;',
					  span: 'white-space: pre-wrap;',
					  p: 'white-space: pre-wrap;', 
					  img: 'margin: 0;width:100%;width: 100%;'
					}" 
				/>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sHeight: '',
			detailId: '',
			messageDetail: {},
			pageTitle:'',
			code:'',
		};
	},
	onLoad(options) {
		this.getStatusHeight();
		this.pageTitle = options.pageTitle
		this.code = options.code
		this.getMessageDetail();
	},
	methods: {
		// 计算距离顶部安全高度
		getStatusHeight() {
			this.sHeight = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
		},
		// 获取公告详情
		getMessageDetail() {
			let query = {
				code: this.code
			}
			this.api.getCodeAgreement(query).then(res => {
				this.messageDetail.messageContent = res.data.data.content;
				// console.log('1', this.messageDetail.messageContent)
				// console.log('2', res.data.data.content)
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	border-top: 1rpx solid #f4f4f4;
	width: 100%;
	background-color: #fff;

	.detail {
		width: 100%;
		box-sizing: border-box;
		padding: 36rpx 30rpx;

		&-title {
			@include str(40rpx, bold, #333333);
		}

		&-content {
			word-wrap: break-word;
			margin-top: 30rpx;

			text {
				@include str(28rpx, 400, #666666);
				letter-spacing: 2rpx;
			}
		}

		&-footer {
			margin-top: 60rpx;

			text {
				margin-top: 5rpx;
				@include str(28rpx, 400, #999999);
			}
		}
	}
}
</style>
